<template>
  <div class="personal_purse">
    <my-header :showBack="true"  :title="$t('lang.UsePoint')"   @rightAction="pushPath('/circulateList')" @rightActionGuc="pushPath('/toGuc')" :rightText="$t('lang.Bill')" ></my-header>

    <div>
      <div class="topred_bg">
        <h2>{{JifenNum||"0.00"}}</h2>
        <p>{{$t("lang.cirPoins")}}</p>
      </div>
      <div class="setbi_box">
        <div class="ul_bibox">
          <div class="useabble">
            <div class="coinbot">
              <p>{{$t("lang.sellNUms")}}</p>
              <div class="tflex">
                <input
                  type="number"
                  v-model="sellOutNum"
                  class="coinnum"
                  :placeholder="$t('lang.enterSNum')"
                />
              </div>
            </div>
            <!-- <div class="coinbot">
                <p>卖出价格</p>
                <div class="tflex">
                  <input type="number" v-model="sellOutPrice"  class="coinnum" placeholder="请输入单价">
                </div>
            </div>-->
            <!-- <div class="coinbot">
                <p>金额</p>
                <div class="tflex">
                  <input type="number" v-model="allPrice"  class="coinnum"  disabled>
                </div>
            </div>-->
            <div class="coinbot">
              <p>{{$t("lang.scccPword")}}</p>
              <input
                type="password"
                v-model="outpayWord"
                class="coinnum"
                :placeholder="$t('lang.enterSpword')"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="sure_btn">
        <van-button type="primary" size="large" @click="sellFraction">{{$t("lang.C2CSellout")}}</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import header from "@/components/headerMenu";
import { Toast } from "vant";

export default {
  components: {
    "my-header": header
  },
  data() {
    return {
      userInfo: {},
      allPrice: "0",
      sellOutNum: "",
      sellOutPrice: 0,
      outpayWord: "",
      JifenNum: ""
    };
  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return timeFormat.formatDate(date, "yyyy.MM.dd hh:mm");
    }
  },
  watch: {
    sellOutPrice() {
      this.allPrice = Number(this.sellOutNum) * Number(this.sellOutPrice);
    }
  },
  computed: {},
  mounted() {
    this.$store.commit("updateSelected", 2);
    this.$store.commit("updateNeedShowFooter", true);
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    this.selectAccount();
  },
  methods: {
    selectAccount() {
      // 个人资产
      this.$ajax(this.$api.selectAccount).then(res => {
        if (res.code == 0) {
          // 流通分
          this.JifenNum = res.msg.usePoint.toFixed(3);
        }
      });
    },
    sellFraction() {
      if (!this.$validator.isInt(this.sellOutNum)) {
        Toast({ message: this.$t("lang.EnterTrueNum"), position: "bottom" });
        return;
      }
      if (!this.$validator.isPassword(this.outpayWord)) {
        Toast({ message: this.$t("lang.enterSpword"), position: "bottom" });
        return;
      }
      this.sellOutPrice = 1; //传个默认值不接收
      this.$ajax(this.$api.pushTrade, {
        tradeType: 1,
        tradePrice: this.sellOutPrice,
        tradeAmount: this.sellOutNum,
        payPass: this.outpayWord
      }).then(res => {
        if (res.code === 0 && res.msg) {
          Toast({ message: this.$t("lang.CZsuccessful"), position: "bottom" });
          this.sellOutPrice = "";
          this.sellOutNum = "";
          this.outpayWord = "";
        } else {
          Toast({ message: res.msg, position: "bottom" });
        }
      });
    }
  }
};
</script>

<style lang='less' scoped>
.topred_bg {
  color: #ffffff;
  background: linear-gradient(
    150deg,
    rgba(172, 6, 0, 1) 0%,
    rgba(135, 2, 0, 1) 100%
  );
  border-radius: 2px;
  box-sizing: border-box;
  padding: 15px 0 26px 12px;
  margin: 10px 12px;
  h2 {
    color: #e1af56;
    font-size: 30px;
  }
  p {
    color: #aa7a24;
    font-size: 14px;
  }
}
.tflex {
  display: flex;
  align-items: center;
}
.useabble {
  box-sizing: border-box;
  padding: 0 12px;
  input {
    width: 100%;
    border: none;
    height: 30px;
  }
  .coinnum {
    font-size: 16px;
    background: #ffffff;
  }
  .coinbot {
    border-bottom: 1px solid #eeeeee;
    padding: 15px 0 12px 0;
    p {
      padding-bottom: 5px;
      color: #333333;
      font-size: 14px;
    }
  }
}


</style>
